import { useEffect, useState } from "react"
import { topDownload, topType } from "../../api/data-api"
import { timeStdFormat } from "../dash-board/DashBoard"
import BaseChart from "../../components/data-visiable/BaseChart"
import { Card } from "antd";

export default function TypeCountPie(props){
  
  const [condition, setCondition] = useState({
    startTime: "2020-1-1",
    endTime: timeStdFormat(new Date()),
  })

  const [option, setOption] = useState(null)

  const loadData = (param)=>{
    if(!param) {param = {}}
    const requestParam = {
      ...condition,
      ...param
    }
    topType(requestParam).then(
      resp=>{
        const data = resp.data.data
        const newData = data.map(item=>{
          return {
            name: item.source,
            value: item.num
          }
        })
        updateOption(newData)
      }
    )
  }

  const updateOption = (data)=>{
    const newOption = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '各专业下载数',
          type: 'pie',
          radius: '50%',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    setOption(newOption)
  }

  useEffect(()=>{
    loadData()
  }, [])

  return <>
    <Card title={"各专业论文数"}>
      <BaseChart options={option}></BaseChart>
    </Card>
  </>
}